<template lang="html">
  <div class="fixedBottom">
    <span class="collect"
    :class="{'active':isCollect}"
    @click="collectCK">
      <img :src="collectImg" width="30" alt="">
      <em v-if="isCollect">已收藏</em>
      <em v-else>收藏</em>
    </span>
    <div class="reserveBtn">
        <button type="button" name="button" class="blockBtn" @click="toSignContact">立即签约</button>
    </div>
    <div class="reserveBtn">
        <button type="button" name="button" class="blockBtn" @click="toReservation">立即预定</button>
    </div>
  </div>
</template>

<script>
import { MessageBox,Toast } from 'mint-ui';
export default {
  name:'houseBottom',
  props: ['houseId','isCollection'],
  data:() => ({
    isCollect:false,
    collectImg:'',
    token:'',
  }),
  methods:{
    // 收藏
    collectCK(){
      var that = this;
      var isCollect = that.isCollect;
      var token = that.token;
      console.log(token);
      if(!token){
        console.log('您未登录');
        MessageBox.alert('前往登录').then(action => {
          that.$router.push({ name:'login'});
        });

        return false;
      }
      var collectParam = {
        token:token,
        houseId:that.houseId
      }
      if(isCollect){
        that.collectImg = require('@/assets/images/collect2@2x.png');
        console.log('取消收藏');
        network.post(configUrl.CANCELCOLLECTIONHOUSE_URL,collectParam,function(res){
          console.log(res);
          if(res.code==401) {
            reLoginWX();
          }else{
          Toast('取消收藏');
        }
        },function(err){
          console.log(err);
        });
      }else {
        that.collectImg = require('@/assets/images/collected@2x.png');
        network.post(configUrl.COLLECTIONHOUSE_URL,collectParam,function(res){
          console.log(res);
          if(res.code==401) {
            reLoginWX();
          }else{
          Toast('成功收藏');
        }
        },function(err){
          console.log(err);
        });
      }
      that.isCollect = !isCollect;
    },
    // 立即预约
    toReservation() {
      var that = this;
      var isCollect = that.isCollect;
      var token = that.token;
      console.log(token);
      if(!token){
        console.log('您未登录');
        MessageBox.alert('前往登录').then(action => {
          that.$router.push({ name:'login'});
        });
        return false;
      }
      that.$router.push({path: '/reservation', query: { houseId: that.houseId}})
    },
    // 立即签约
    toSignContact() {
      var that = this;
      var isCollect = that.isCollect;
      var token = that.token;
      console.log(token);
      if(!token){
        console.log('您未登录');
        MessageBox.alert('前往登录').then(action => {
          that.$router.push({ name:'login'});
        });
        return false;
      }
      that.$router.push({path: '/signContact', query: { houseId: that.houseId}})
    }
  },
  mounted(){
    var that = this;
    that.collectImg = require('@/assets/images/collect2@2x.png');

    this.$nextTick(() => {
      let userInfo = window.localStorage.getItem('userInfo');
      if(userInfo){
        this.token = JSON.parse(userInfo).token;
        console.log(userInfo);
      }else{
        console.log('0');
      }
    })
  },
  updated() {
    //do something after updating vue instance
    this.$nextTick(() => {
      this.isCollect = this.isCollection;
      console.log(this.isCollection);
    })
  }
}
</script>

<style lang="scss">
.fixedBottom{
  bottom: 0 !important;
  @include flex;
  border-top: 1px solid $borderColor;
  font-size: 1rem;
  background: white;
  .collect{
    @include flexcell;
    text-align: center;
    &.active{
      color: $redColor;
    }
  }
  .reserveBtn{
    flex:1;
    border-left: 1px solid white;
    button{
      border-radius: 0;
    }
  }
}
</style>
